<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	width: 776px;
	margin: 20px auto;
	border: 1px solid #00d2ff;
}

.head {
	margin-top: 5px;
	width: 776px;
	height:150px;
	background-image: url("images/head.jpg");
}

.nav{
height: 35px;
/* 	width: 775px; */

}

.nav ul {
	list-style-type: none;
}

.nav ul li {
	background-color: green;
	float: left;
	width: 100px; 
/* 	height: 30px; */
/* 	display:block; */
	margin-right:1px;
	text-align: center;
	padding:3px;
}

.content p {
	text-indent: 2em;
	line-height: 1.5em;
}



.footer {
	text-align: center;
	background-color: green;
}

</style>
</head>

<body>
	<div class="head"></div>

	<div class="nav">
		<ul>
			<li>
				首页
			
			</li>
			<li>查询所有</li>
			<li>查询条件</li>
			<li>修改自身</li>
		</ul>
		
	</div>
	

	<div class="content">
		<p>H3+ul，对每个列表项做成链接a并设置成相对定位，链接后的内容做成一个div（此div使用绝对定位），且首先掩藏起来，在样式中设计a:hover
			div再让这个div显示出来。

			另外，注意，先写html代码，之后再写格式调整css。格式调整的时候，凡是html标记改变样式，可在firefox中直接修改比较方便。</p>

		<p>H3+ul，对每个列表项做成链接a并设置成相对定位，链接后的内容做成一个div（此div使用绝对定位），且首先掩藏起来，在样式中设计a:hover
			div再让这个div显示出来。

			另外，注意，先写html代码，之后再写格式调整css。格式调整的时候，凡是html标记改变样式，可在firefox中直接修改比较方便。</p>

	</div>
	
	<div class="footer">
	<p>关于系统 | 广告服务 | 招聘信息 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p>
		Copyright &copy;2016 - 2018 Li Yi. All Rights Reserved
	
	</div>

</body>
</html>